/**
 * 列表区可以显示所有物料
 * key对应组件的映射关系
 */
import { ElButton, ElInput, ElOption, ElSelect } from "element-plus";
import Range from "@/packages/components/Range"
function createEditorConfig() {
    const componentList = [];
    const componentMap = {};
    return {
        componentList,
        componentMap,
        register: (component) => {
            //左边目录显示用list
            //右侧编辑区域用map
            componentList.push(component);
            componentMap[component.key] = component;
        }
    }
}

export let registerConfig = createEditorConfig();
//生成右侧对元素进行编辑的dom元素的相对应的属性,显示的类型元素
const createInputProp = (label) => ({ type: "input", label });
const createColorProp = (label) => ({ type: "color", label });
const createSelectProps = (label, options) => ({ type: "select", label, options });
const createTableProp = (label, table) => ({ type: "table", label, table })
//基础元素的配置---》注册表

//props为.editor-right服务,渲染到div.editor-right
registerConfig.register({
    resize: {
        width: true,   //可以拖拽宽高
    },
    label: "下拉框",
    preview: () => <ElSelect placeholder="预览输入框"></ElSelect>,
    // default是在editor-config.jsx配置里面直接写死的,所以消费也是直接写死
    render: ({ model, props, size }) => <ElSelect placeholder="预览输入框" {...model.default} style={{ height: size.height + "px", width: size.width + "px" }}>
        {
            (props.options || []).map(item => {
                return <ElOption label={item.label} value={item.value}></ElOption>
            })
        }
    </ElSelect>,
    key: "select",
    props: {
        options: createTableProp("下拉选项", {
            options: [
                {
                    label: "显示值",
                    field: "label"
                },
                {
                    label: "绑定值",
                    field: "value"
                },

            ],
            key: "label"//显示给用户看的
        })
    },
    model: {
        default: "绑定的字段值"//这里直接这么些中文真的问题不大么？
    }
});
registerConfig.register({
    label: "文本",
    resize: {
        width: true,//可以拖拽宽度
    },
    rotate:{
        value:0
    },//旋转的角度
    preview: () => "预览的文本", //transform: `rotate(${size.rotate}deg)`,给外部容器加旋转了
    render: ({ props, size }) => <span style={{ display: "inline-block", color: props.color, fontSize: props.size, height: size.height + "px", width: size.width + "px" }}>{props.text || "渲染文本"}</span>,
    key: "text",
    props: {
        text: createInputProp("文本内容"),
        color: createColorProp("字体颜色"),
        size: createSelectProps("字体大小", [
            {
                label: "14px", value: "14px"
            },
            {
                label: "20px", value: "20px"
            },
            {
                label: "24px", value: "24px"
            },
        ])
    }
});
registerConfig.register({
    label: "按钮",
    resize: {
        width: true,   //可以拖拽宽高
        height: true
    },
    preview: () => <ElButton>预览按钮</ElButton>,
    render: ({ props, size }) => <ElButton style={{ height: size.height + "px", width: size.width + "px" }} type={props.type} size={props.size}>{props.text || "渲染按钮"}</ElButton>,
    key: "button",
    props: {
        text: createInputProp("按钮内容"),
        type: createSelectProps("按钮类型", [
            {
                label: "基础", value: "primary"
            },
            {
                label: "成功", value: "success"
            },
            {
                label: "警告", value: "warning"
            },
            {
                label: "危险", value: "danger"
            },
            {
                label: "文本", value: "text"
            },
        ]),
        size: createSelectProps("按钮尺寸", [
            {
                label: "默认", value: ""
            },
            {
                label: "中等", value: "medium"
            },
            {
                label: "小", value: "small"
            },
            {
                label: "极小", value: "mini"
            }
        ]),
    }
});
registerConfig.register({
    label: "输入框",
    resize: {
        width: true,   //可以拖拽宽高
        height: true
    },
    preview: () => <ElInput placeholder="预览输入框"></ElInput>,
    // default是在editor-config.jsx配置里面直接写死的,所以消费也是直接写死
    render: ({ model, size }) => <ElInput style={{ height: size.height + "px", width: size.width + "px" }} placeholder="渲染输入框" {...model.default}></ElInput>,
    key: "input",
    model: {
        default: "绑定的字段值"//这里直接这么些中文真的问题不大么？
    }
});
registerConfig.register({
    label: "范围选择器",
    resize: {
        width: true,   //可以拖拽宽高
        height: true
    },
    preview: () => <Range start={0} end={100}></Range>,
    // default是在editor-config.jsx配置里面直接写死的,所以消费也是直接写死
    //这里的start，end会
    render: ({ model, size }) => <Range style={{ height: size.height + "px", width: size.width + "px" }}
        {...{
            start: model.start.modeValue,
            end: model.end.modelValue,
            "onUpdate:start": model.start['onUpdate:modelValue'],
            "onUpdate:end": model.end['onUpdate:modelValue'],
        }}></Range>,
    key: "range",
    model: {
        start: "开始字段值",
        end: "结束的字段值",
    }
});
